<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>回调地狱</title>
    </head>
    <body>
        <!-- 回调函数: 在网络操作中, 异步方法需要用 回调函数进行封装 -->
        <!-- 亮亮抱着涛涛 去相亲;  相亲成功后, 放下涛涛回来报信 -->
        <!-- 但是: 如果回调函数中  还有回调函数 .... 则会形成多层嵌套 -->
        <script>
            // 场景场景: 注册
            // 点击注册按钮 -> 先请求询问 用户名是否重复 -> 再询问邮箱是否重复 -> 再询问手机号是否合法 -> 完成注册
            function register() {
                // 1. 先验证用户名是否重复, 用定时器模拟请求: 需要1s
                console.log('开始验证用户名...')
                setTimeout(() => {
                    // 用随机数来判断: >0.8 算成功
                    if (Math.random() > 0.2) {
                        console.log('用户名OK, 开始验证邮箱')

                        // 验证邮箱
                        setTimeout(() => {
                            if (Math.random() > 0.2) {
                                console.log('邮箱正确! 开始验证手机号')

                                setTimeout(() => {
                                    if (Math.random() > 0.2) {
                                        console.log('手机号成功, 开始注册')

                                        setTimeout(() => {
                                            if (Math.random() > 0.2) {
                                                console.log('注册成功')
                                            } else {
                                                console.log('注册失败')
                                            }
                                        }, 1000)
                                    } else {
                                        console.log('手机号失败')
                                    }
                                }, 1000)
                            } else {
                                console.log('邮箱重复!')
                            }
                        }, 1000)
                    } else {
                        console.log('用户名重复!')
                    }
                }, 1000)
            }

            register()
        </script>
    </body>
</html>
